<template>
  <div class="sidebar">
    <div class="sidebar-header" @click="goToHome">
      <h2>电信管理系统</h2>
    </div>
    <nav class="sidebar-nav">
      <ul>
        <li v-for="item in menuItems" :key="item.id" class="menu-item">
          <div 
            class="menu-title" 
            @click="toggleMenu(item.id)"
            :class="{ active: activeMenu === item.id }"
          >
            <span>{{ item.name }}</span>
            <span class="arrow" :class="{ rotated: activeMenu === item.id }">▶</span>
          </div>
          <ul v-if="activeMenu === item.id" class="submenu" :class="{ active: activeMenu === item.id }">
            <li 
              v-for="subItem in item.children" 
              :key="subItem.id"
              class="submenu-item"
              @click="selectMenuItem(item.id, subItem.id)"
            >
              {{ subItem.name }}
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'Sidebar',
  setup() {
    const activeMenu = ref('')
    const router = useRouter()
    
    // 菜单数据
    const menuItems = [
      {
        id: 'customer',
        name: '客户管理',
        children: [
          { id: 'info', name: '客户信息' },
          { id: 'phone', name: '手机号信息' },
          { id: 'virtual', name: '虚拟号信息' },
          { id: 'account', name: '账户信息' }
        ]
      },
      {
        id: 'staff',
        name: '员工管理',
        children: [
          { id: 'manage', name: '员工信息' },
          { id: 'info', name: '员工详情' },
          { id: 'role', name: '角色信息' },
          { id: 'permission', name: '权限信息' }
        ]
      },
      {
        id: 'bill',
        name: '账单管理',
        children: [
          { id: 'info', name: '账单信息' },
          { id: 'monthly', name: '出月账' }
        ]
      }
    ]
    
    // 切换菜单展开/收起
    const toggleMenu = (menuId) => {
      if (activeMenu.value === menuId) {
        activeMenu.value = ''
      } else {
        activeMenu.value = menuId
      }
    }
    
    // 选择菜单项
    const selectMenuItem = (moduleId, subModuleId) => {
      // 根据菜单选择跳转到对应路由
      if (moduleId === 'customer') {
        router.push(`/customer/${subModuleId}`)
      } else if (moduleId === 'staff') {
        router.push(`/staff/${subModuleId}`)
      } else if (moduleId === 'bill') {
        router.push(`/bill/${subModuleId}`)
      }
    }
    
    // 跳转到首页
    const goToHome = () => {
      router.push('/staff')
    }
    
    return {
      activeMenu,
      menuItems,
      toggleMenu,
      selectMenuItem,
      goToHome
    }
  }
}
</script>

<style scoped>
.sidebar {
  width: 250px;
  height: 100vh;
  background-color: #2c3e50;
  color: white;
  position: fixed;
  left: 0;
  top: 0;
  overflow-y: auto;
  transition: all 0.3s ease;
  z-index: 100;
}

.sidebar-header {
  padding: 20px;
  background-color: #1a252f;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.sidebar-header:hover {
  background-color: #2c3e50;
}

.sidebar-header h2 {
  margin: 0;
  font-size: 1.2em;
  color: white;
}

.sidebar-nav {
  padding: 10px 0;
}

.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  border-bottom: 1px solid #34495e;
}

.menu-title {
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s;
}

.menu-title:hover {
  background-color: #34495e;
}

.menu-title.active {
  background-color: #3498db;
}

.arrow {
  transition: transform 0.3s ease;
}

.arrow.rotated {
  transform: rotate(90deg);
}

.submenu {
  background-color: #34495e;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.submenu.active {
  max-height: 500px;
}

.submenu-item {
  padding: 12px 20px 12px 40px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-left: 3px solid transparent;
}

.submenu-item:hover {
  background-color: #3d566e;
}

.submenu-item.active {
  background-color: #3498db;
  border-left: 3px solid #1abc9c;
}
</style>